<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      .wrap {
        width: 100%;
        /* transform: translateX(-20%); */
      }
      .left {
        float: left;
        width: 20%;
        height: 1000px;
        background-color: pink;
        color: white;
        display: none;
      }
      .head {
        float: left;
        width: 100%;
        height: 250px;
        background-color: skyblue;
        box-sizing: border-box;
        overflow: hidden;
        margin-bottom: 50px;
      }
      .head h1 {
        margin-top: 30px;
        text-align: center;
        color: white;
      }
      .head p {
        text-align: center;
        color: white;
      }
      .nav {
        margin: 20px 0 0 30px;
      }
      .log {
        width: 80px;
        height: 60px;
        margin-left: 47%;
      }
      ul {
        float: left;
        margin-left: 100px;
        border-right: 2px solid #000;
        width: 400px;
        height: 400px;
        display: flex;
        align-content: space-around;
        flex-wrap: wrap;
        list-style: none;
      }
      ul li {
        border: 2px solid;
        text-align: center;
        width: 100%;
        height: 50px;
      }
      .person {
        float: left;
        width: 500px;
        height: 500px;
      }
      .span {
        justify-content: space-between;
        display: flex;
        width: 300px;
        height: 30px;
      }
      .span span {
        width: 150px;
      }
      .span1 {
        width: 500px;
        height: 500px;
      }
      .spans {
        justify-content: space-evenly;
        display: flex;
        width: 500px;
        /* height: 10px; */
      }
      .spans span {
        width: 250px;
        height: 30px;
      }
    </style>
  </head>
  <body>
    <div class="wrap">
      <div class="left">
        <ul>
          <li>主页</li>
          <li>排行榜</li>
          <li>联系方式</li>
        </ul>
      </div>
      <div class="head">
        <button class="nav">导航栏</button>
        <h1>欢迎来到富豪排行榜</h1>
        <p>weclome to the rich rank</p>
        <button class="log">登录</button>
      </div>
      <ul>
        <li class="increase">添加账户</li>
        <li class="double">资金翻倍</li>
        <li class="query">查询百万富豪</li>
        <li class="sort">财富榜</li>
        <li class="add">计算总额</li>
      </ul>
      <div class="person">
        <div class="span">
          <span>person</span>
          <span>Wealth</span>
        </div>
        <div class="span1"></div>
      </div>
    </div>
    <script>
      let dataInfo = [
        { name: 'English chan', money: 392001 },
        { name: 'alex chan', money: 568932 },
        { name: 'melon chan', money: 698756 },
        { name: 'Clare Langner', money: 292489 },
        { name: 'Abigail Rice', money: 953957 },
        { name: 'Clarice Dias', money: 168472 },
        { name: 'Vernon Lucas', money: 718225 },
        { name: 'Nina Schmidt', money: 889147 },
      ];
      //获取节点
      let increase = document.querySelector('.increase');
      let span = document.querySelector('.span1');
      let double = document.querySelector('.double');
      let count = 0;
      //把富豪信息封装成函数
      function addRichman(name, money) {
        span.innerHTML += `
  <div class="spans">
    <span>${name}</span>
    $<span class='money'>${money}</span>
  </div>
  `;
      }
      //计算富豪的总金额
      function addTotalMoney(moneyNodes) {
        let totalMoney = 0;
        moneyNodes.forEach((ele) => {
          totalMoney += parseInt(ele.textContent);
        });

        addRichman('Total money:', totalMoney);
      }
      //添加富豪
      increase.addEventListener('click', () => {
        addRichman(dataInfo[count].name, dataInfo[count].money);
        count++;
      });
      //金额翻倍
      double.addEventListener('click', () => {
        let money = document.querySelectorAll('.money');
        money.forEach((ele) => {
          ele.textContent = parseInt(ele.textContent) * 2;
        });
      });
      //查询百万富豪
      let query = document.querySelector('.query');
      query.addEventListener('click', () => {
        let spans = Array.from(document.querySelectorAll('.spans'));
        let filteredList = spans.filter((node) => {
          let money = parseInt(node.querySelector('.money').textContent);
          return money >= 1000000;
        });
        let parent = spans[0].parentNode;
        spans.forEach((node) => parent.removeChild(node));
        filteredList.forEach((node) => parent.appendChild(node));
      });
      //金额从高到低排序
      let sort = document.querySelector('.sort');
      sort.addEventListener('click', () => {
        let spans = Array.from(document.querySelectorAll('.spans'));
        let sortedList = spans.sort((a, b) => {
          return (
            parseInt(b.querySelector('.money').textContent) -
            parseInt(a.querySelector('.money').textContent)
          );
        });
        let parent = spans[0].parentNode;
        sortedList.forEach((node) => {
          parent.removeChild(node);
          parent.appendChild(node);
        });
      });
      //计算总金额
      let add = document.querySelector('.add');
      add.addEventListener('click', () => {
        let moneyNodes = document.querySelectorAll('.money');
        addTotalMoney(moneyNodes);
      });
    </script>
  </body>
</html>
